<template>
        <loadingAction v-if="loading"></loadingAction>
<div class="unitl">
        <ul>
                <li v-for="item in unitListData" :key="item.id">
                       <router-link :to="{name:'pumpdetail',
                                         query:{
                                                id:item.id
                                         }
                       }"> <unit :id=item.id :unitStatus=item.unitStatus></unit></router-link>
                </li>
        </ul>


     <!-- 分页器 -->
     <div class="demo-pagination-block">
                <el-pagination v-model:current-page="currentpage" 
                 :disabled="disabled" 
                        layout="total, prev,pager,next,jumper" :total="total"
                        @current-change="handleCurrentChange" />
        </div>
        </div>
</template>     
<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import {pageUnit,pagedetail} from '@/api/unit'
import unit from '@/components/pumpUnit/unit.vue'
import loadingAction from '@/components/loadingAction/loadingAction.vue'


const unitListData=ref([] as any[])
const run=ref([] as any[])
const currentpage=ref(1)
const disabled = ref(false)
const total = ref()
const pageInfo=reactive({
        pageSize:ref(6),
        page:ref(1)
})

const loading=ref(true)

onMounted(()=>{
        pageUnit1(pageInfo)
        setTimeout(() => {
               loading.value=false 
        }, 300);
})

//获取抽油机列表
function pageUnit1(pageINfo:object){
        pageUnit(pageInfo).then((res)=>{
                unitListData.value=res.data.data.records
                total.value=res.data.data.total
                console.log(unitListData.value)
                console.log(total.value)
        }).catch((erro)=>{
                alert("no data"+erro)
        })
}

//设置当前页数--------分页
const handleCurrentChange = (val: number) => {
        pageInfo.page=val
        pageUnit1(pageInfo)
}


const pumping=reactive({})
const runlist=ref([])


</script>

<style scoped> 
ul{
        display: inline-flex;
        flex-wrap: wrap;
           
            width: 100%;
            justify-content: flex-start;

}
li{
        margin: 10px;
        list-style-type: none
}
.unitl{
        background-color: antiquewhite;
        overflow-x: hidden;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 20px;
}

.demo-pagination-block{
    position: relative;
    bottom: 10px;
    height: 40px;
    width: 5%;
    left: 50%;
    
} 
a{
  text-decoration: none;
  color: black;
}

</style>